Using grid layers

Grid layer arranges 2D objects in a grid. Grid layers are especially useful when you need to define the exact position for content that is presented on screens of different sizes.

Creating a grid layer

To create a grid layer:

1. In the Project right-click the scene where you want to create a grid layer and select Create > Grid Layer.
2. Add several objects to the grid layer.
   For example, in the Project right-click the grid layout and select Create > Image Layer.
   As you add objects, Kanzi Studio positions them from the top-left towards the bottom-left corner of the grid layer. The exact location of each object in the grid layer is defined by the Column and Row properties in each object.

Creating user interface controls for different screen sizes using grid layers

Use grid layers to create applications with consistent user interfaces. When set up correctly, grid layers distribute the objects of your user interface so that they occupy the same relative amount of space, regardless of the screen size, or orientation of a device. For example, with grid layers you can place user interface controls in the top-left and bottom-right corners, with strictly defined distances from the edges of the screen.

To create user interface controls for different screen sizes using grid layers:

1. Create a grid layer with two columns and two rows, and add two objects to the grid layer.
   For example, add two image layers.
2. In the Project select the grid layer and in the Properties set:
   • All Columns and Rows of the grid layer to Proportional
   • Horizontal Alignment and Vertical Alignment to Stretch
     Note that to keep images pixel perfect, instead of setting Horizontal Alignment and Vertical Alignment to Stretch, add property Layer Snap to Pixel to layers whose position changes with the application layout.
   With these settings you set the layer to equally distribute its content across its entire width and height, and set the layer to stretch across the entire screen.
3. In the Project select the second object in the grid layer and in the Properties set properties:
   • Column to 1
   • Row to 1
   • Horizontal Alignment to Right
   • Vertical Alignment to Bottom
   With these settings you position the second layer into the second column and second row of the grid layer, and place it in the bottom-right corner of the screen. The second object in the grid layer stays in that position regardless of the screen size or orientation.
4. In the Project select the object at the top of the grid layer and in the Properties add properties Horizontal Margin and Vertical Margin, and set the values for:
   • Horizontal Margin property Right to 20
   • Vertical Margin property Top to 20
   With these settings you create a 20 pixel margin between the object and the edge of the screen.
5. Repeat the previous step for the object at the bottom of the grid layer, but set Horizontal Margin property Left, and Vertical Margin property Bottom to 20.

See also

Setting the window size for applications

Using grid layouts

Using grid list boxes

Open topic with navigation